<template>
  <view class="container" v-if="isShow">
    <view class="box">
      <view class="box-top">
        <view class="msg">你的奖励<br/>{{ integral }}积分已到账</view>
      </view>
      <view class="box-bottom">
        <view class="title">看了这个视频您觉得该 内容是否对您有帮助？</view>
        <view class="message">是否想继续看下去</view>
        <view class="buttons">
          <view class="button" @click="close">否</view>
          <view class="button button-y" @click="confirm">是</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['integral'],
  data() {
    return {
      isShow: false
    };
  },
  methods: {
    show() {
      this.isShow = true
    },
    //隐藏弹框
    hide() {
      this.isShow = false
    },
    close() {
      uni.switchTab({url: '/pages/sindex/index'})
    },
    confirm() {
      this.$emit('confirm')
      this.hide()
    }
  }
}
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  width: 540upx;
  display: flex;
  flex-direction: column;
}

.box-top {
  width: 100%;
  height: 320upx;
  background-image: url("https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/dacu/bg_jifendaozhang@2x.png");
  background-size: 100% 100%;
  position: relative;
  box-sizing: border-box;
  padding-top: 180upx;
}

.box-top .msg {
  width: 100%;
  font-size: 40upx;
  color: #FFF9D1;
  text-align: center;
}

.box-bottom {
  width: 100%;
  background-color: #fff;
  border-radius: 0upx 0upx 10upx 10upx;
  box-sizing: border-box;
  padding: 30upx 40upx;
}

.title {
  font-size: 44upx;
  color: #FF5F15;
  font-weight: 600;
  text-align: center;
}

.message {
  font-size: 44upx;
  color: #333333;
  font-weight: 600;
  text-align: center;
  margin-top: 10upx;
}

.buttons {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.button {
  width: 210upx;
  height: 78upx;
  color: #F55F13;
  font-size: 42upx;
  line-height: 78upx;
  text-align: center;
  box-sizing: border-box;
  border-radius: 44upx;
  border: 2upx solid #F56514;
  margin-top: 30upx;
}

.button-y {
  background-color: #F56514;
  color: #fff;
  font-weight: 600;
}
</style>